import { computed, defineComponent, ref, toRef, unref, watch } from 'vue';
import { Drawer, Button, Checkbox, Divider, Radio, Switch } from 'ant-design-vue';
import { getPrayerObj } from '/@/hooks/usePrayers';
import { appStore } from '/@/store/modules/app';
import { SosaryType } from '/@/types/config';

export default defineComponent({
  components: { Drawer, Button, Divider, Radio, Switch },
  props: {
    visible: { type: Boolean },
  },
  setup(props) {
    const visible = toRef(props, 'visible');
    const settingRef = ref();

    const projectSetting = computed(() => {
      return { ...appStore.getProjectSetting, ...settingRef };
    });

    function renderRosarySelect() {
      const rosaryObj = getPrayerObj('rosaryChinese');
      const options = Object.keys(rosaryObj).map((item) => {
        return {
          label: rosaryObj[item],
          value: item,
        };
      });
      function Change(e: SosaryType[]) {
        // store.dispatch('setProjectSetting', { rosarySelect: e });
        appStore.commitProjectSetting({ rosarySelect: e });
        // checklist.value = e;
      }
      const props = {
        options,
        onChange: Change,
      };

      return (
        <>
          <Divider>选念玫瑰经</Divider>
          <Checkbox.Group {...props} v-model={[unref(projectSetting).rosarySelect, 'value']} />
        </>
      );
    }

    function renderRadio(name: string, title: string) {
      const statusArr = ['显示', '显示标题', '不显示'];
      // store.dispatch('setProjectSetting', { showFather: 0 });

      function change(e) {
        // store.dispatch('setProjectSetting', { [name]: projectSetting[name] });
        appStore.commitProjectSetting({ [name]: unref(projectSetting)[name] });
      }

      const props = {
        onChange: change,
      };

      return (
        <>
          <Divider>{title}</Divider>
          <Radio.Group v-model={[unref(projectSetting)[name], 'value']} {...props}>
            {statusArr.map((item, val) => (
              <Radio.Button value={val}>{item}</Radio.Button>
            ))}
          </Radio.Group>
        </>
      );
    }

    function renderSwich() {
      function change(e) {
        appStore.commitProjectSetting({ showSong: unref(projectSetting).showSong });
      }

      const props = {
        onChange: change,
      };
      return (
        <>
          <Divider>玫瑰经唱词</Divider>
          <Radio.Group v-model={[unref(projectSetting).showSong, 'value']} {...props}>
            <Radio.Button value={true}>显示</Radio.Button>
            <Radio.Button value={false}>不显示</Radio.Button>
          </Radio.Group>
        </>
      );
    }

    function renderSetting() {
      return (
        <>
          {renderRadio('showFaith', '信经')}
          {renderRadio('showFather', '天主经')}
          {renderRadio('showMary', '圣母经')}
          {renderRadio('showGlory', '圣三光荣颂')}
          {renderRadio('showQueen', '又圣母经')}
          {renderSwich()}
        </>
      );
    }
    const vporps = {
      title: '总设置',
      closable: true,
      // maskClosable: false,
      width: '90%',
    };

    return () => (
      <>
        <Drawer v-model={[visible.value, 'visible']} {...vporps}>
          {renderRosarySelect()}
          {renderSetting()}
        </Drawer>
      </>
    );
  },
});
